<template>
    <div class="inner-info">
        <div class="header">
            <h3>五、设备列表</h3>
            <div>
                <!-- <transition name="slide-fade" mode="out-in"> -->
                    <a-button @click="editDevice" type="primary" v-if="!editdevice && user_id == dispatch_id">修改</a-button>
                    <a-button type="primary" v-if="editdevice && user_id == dispatch_id" @click="returned" >还原默认</a-button>
                    <a-button @click="saveDevice" type="primary" v-if="editdevice && user_id == dispatch_id" style="margin-left: 10px;">保存</a-button>
                <!-- </transition> -->
            </div>
        </div>
        <div class="form-main-content">
            <a-table :columns="deviceColumns" :dataSource="deviceData" :rowKey="record  => record.device_sn"
                     :pagination="pagination" bordered>
                    <span slot="action" slot-scope="text, record,index">
                        <i v-if="editdevice">
                        <a-input-number v-model="deviceData[index].num" @change="numChange"/>
                        </i>
                        <i v-else>{{record.num}}</i>
                    </span>
                <span slot="footer" v-if="editdevice">
                    <a-button type="primary" @click="showModal">新增</a-button>
                </span>
            </a-table>
            <div class="device-remark"><p>备注信息：</p><span v-if="editdevice"><a-input type="textarea" v-model="remark"/></span><span
                    v-else>{{remark ? remark : '无'}}</span></div>
        </div>
        <a-modal v-model="showmodal" title="添加设备" @ok="submit"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 centered
                 :keyboard='false'
                 @cancel="deviceCancel"
                 okText='确认'
                 :maskClosable='false'>
            <a-form :form="form" :hideRequiredMark="true">
                <a-row class="form-main-content">
                    <a-col :span="24" class="form-item">
                        <a-form-item label="设备类型">
                            <a-select v-decorator="['type_id',{rules: [{ required: true, message: '请选择设备类型' }]}]"
                                      placeholder="请选择设备类型" @change="typeChange">
                                <a-select-option v-for="v in types" :key="v.id" :value="v.id">
                                    {{v.name}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" class="form-item">
                        <a-form-item label="设备型号">
                            <a-select v-decorator="['model_id',{rules: [{ required: true, message: '请选择设备型号' }]}]"
                                      placeholder="请选择设备型号">
                                <a-select-option v-for="v in models" :key="v.id" :value="v.id">
                                    {{v.model}}({{v.sn}})
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" class="form-item">
                        <a-form-item label="设备数量">
                            <a-input-number :min="1" placeholder="设备数量" v-decorator="[
                                    'num',{initialValue:1},{rules: [{ required: true, message: '请输入设备数量' }]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
        <a-modal v-model="delete_device" title="是否删除此设备" @ok="deleteDevice" @cancel="cancelDelete"
                 :cancelButtonProps="{ props: {type: 'primary'}}"
                 cancelText="取消"
                 centered
                 :keyboard='false'
                 :maskClosable='false'>
            <div class="confirm-delete-wrapper">
                <p>是否删除此设备？</p>
            </div>
        </a-modal>
    </div>
</template>

<script>
    export default {
        name: 'device',
        props: ['task_id', 'dispatch_id', 'device_remark'],
        data() {
            return {
                user_id: this.$store.getters.user_id,
                deviceData: [],
                pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 5,
                    showTotal: (total) => {
                        return '共' + total + '条'
                    },
                    onChange: (page, size) => {
                        this.handleChange(page, size)
                    },
                    hideOnSinglePage: true,
                },
                deviceColumns: [
                    {title: "设备类型", dataIndex: "type", align: "center"},
                    {title: "设备型号", dataIndex: "model", align: "center"},
                    {title: "设备数目", scopedSlots: {customRender: "action"}, align: "center"},
                    // {title: "客户强制要求", dataIndex: "plan_num", align: "center"},
                    // {title: "实际需求", scopedSlots: {customRender: "action"}, align: "center"},
                ],
                editdevice: false,
                showmodal: false,
                form: this.$form.createForm(this),
                types: [],
                models: [],
                ktypes: [],
                kmodels: [],
                remark: '',
                delete_device: false
            }
        },
        mounted() {
            setTimeout(() => {
                this.remark = this.device_remark
                this.getList();
            }, 300)

        },
        methods: {
            async getList(param = {}) {
                let req = {page_size: this.pagination.pageSize, page: this.pagination.current, task_id: this.task_id};

                let data = await this.http(
                    "get",
                    "task-device/index",
                    Object.assign(req, param)
                );
                this.data = JSON.stringify(data.data) 
                this.deviceData = data.data;
                this.types = data.types
                this.pagination.total = data.total_count;
                 this.types.map(item => {
                    this.ktypes[item.id] = item
                    /* if (item.models.length > 0) {
                        item.models.map(m => {
                            this.kmodels[m.id] = m
                        })
                    } */
                }); 
            },
            numChange(value) {
                if (value == 0) {
                    this.delete_device = true;
                }
            },
            deviceCancel() {
                this.form.resetFields();
            },
            deleteDevice() {
                this.deviceData.map((item, key) => {
                    if (item.num == 0) {
                        this.deviceData.splice(key, 1)
                    }
                });
                this.delete_device = false;
            },
            cancelDelete() {
                this.deviceData.map((item, key) => {
                    if (item.num == 0) {
                        this.deviceData[key].num = 1
                    }
                });
                this.delete_device = false;
            },
            handleChange(page, size) {
                //列表展示条数改变
                this.pagination.current = page
                this.pagination.pageSize = size;
                this.getList();
            },
            showModal() {
                this.showmodal = true
            },
            submit() {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        values.plan_num = 0
                        values.type = this.ktypes[values.type_id].name
                        values.device_sn = this.kmodels[values.model_id].sn
                        values.model = this.kmodels[values.model_id].model+'('+values.device_sn+')'
                        
                        let flag = false;
                        this.deviceData.map(item => {
                            if (item.type_id === values.type_id && item.model_id === values.model_id) {
                                item.num += values.num
                                flag = true
                            }
                        });
                        if (flag === false) {
                            this.deviceData.push(values)
                        }
                        this.showmodal = false
                    }
                })
            },
            typeChange(key) {
                /* this.types.map(item => {
                    if (item.id == key) {
                        this.models = item.models
                    }
                }) */
                this.http(
                    "get",
                    "device/index",
                    {page_size:1000,type:key}
                ).then(data=>{
                    data.data.map(m => {
                            this.kmodels[m.id] = m
                        })
                    this.models = data.data
                    
                });
                this.form.setFieldsValue({model_id: ''})
            },
            editDevice() {
                this.editdevice = true
            },
            saveDevice() {
                //if (this.deviceData.length > 0) {
                    this.http('put', 'task-device/update?id=' + this.task_id, {
                        devices: this.deviceData,
                        device_remark: this.remark
                    }).then(res => {
                        this.$message.success(res.msg, 1)
                        this.editdevice = false
                    });
                    //return false
                //}
               // this.$message.warning('请选择设备', 1)
            },
            returned() {
                this.deviceData = JSON.parse(this.data)
                this.remark = this.device_remark
            }
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "./../../assets/scss/mixin";

    .device-remark {
        @include fj();
        margin-top: 10px;
        & > span {
            flex: 1;
        }
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: all .3s ease;
    }

    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }

    .confirm-delete-wrapper {
        width: 100%;
        padding: 20px;
        text-align: center;

        p {
            font-size: 16px;
        }
    }

    .header {
        @include fj();
        margin-bottom: 20px;
        & > div {
            margin-right: 18px;
        }
    }
</style>
